<template>
	<view class="depart-list">
		<checkBranch @updateCampus="updateCampus" />
		<Search @search='onSearch' :placeholder='type===1?"请输入护理科室名称搜索":"请输入医生或科室名称搜索"' />
		<view class="depart-list-main">
			<view class="detail-list">
				<view class="left">
					<view class="item" :class="{active: active == index}" v-for="(item,index) in listParent"
						:key="index" @click="checkItem(item, index)">
						{{item.parentName}}
					</view>
				</view>
				<view class="right">
					<view class="item" v-for="(child,indexChild) in showItems" :key="indexChild"
						@click="toPage(child,'deptCode')">
						<view>{{child.name}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Search from '@/components/Search/index.vue'
	import {
		getDeptList
	} from '@/api/department.js'
	import checkBranch from '../../../components/checkBranch/checkBranch.vue'
	import {
		mapGetters,
	} from 'vuex';
	export default {
		components: {
			Search,
			checkBranch
		},
		data() {
			return {
				type: 1, // 1 科室介绍 2 医生介绍
				name: null,
				departList: [],
				departListAll: [],
				doctorList: [],
				selectShow: false,
				active: 0,
				showItems: [], //子科室
				tempAllList: [], //临时存放所有数据
				campusCode: '',
				listParent: [],
			}
		},
		computed: {
			...mapGetters([
				'userInfo', "currentHospitalInfo"
			])
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type || 1
			}
		},
		mounted() {
			this.name = uni.getStorageSync("departmentName")
			// 在线问诊跳转带过来科室名称查询，用完后需要设置清空
			uni.setStorageSync("departmentName", '')
			this.initData()
		},
		methods: {
			// 更新了院校选择
			updateCampus(val) {
				this.departListAll = []
				this.departList = []
				this.campusCode = val
				this.initData()
			},
			initData() {

				// let params = {
				// 	name: this.name,
				// 	departmentType: "01",
				// 	campusCode: this.currentHospitalInfo.code,
				// 	orderBy: "sort"
				// }
				// this.departList = []
				// this.doctorList = []
				// // 远程没有模糊查询，查询必须是deptCode
				// getDeptList(params).then(data => {
				// 	let res = data || [];
				// 	this.departListAll = res;
				// 	this.updatebranchCode(0)
				// }).catch(e => {})


				//模拟数据
				this.departListAll = [
					{
						parentName: '专科护理',
						name: '静脉采血',
						parentCode: '08221528001',
						code: '08221528001_1',
						campusCode: "02",
						campusName: "*郫都区中医医院(新院区)"
					},
					{
						parentName: '专科护理',
						name: '安宁疗护',
						parentCode: '08221528001',
						code: '08221528001_2',
						campusCode: "02",
						campusName: "*郫都区中医医院(新院区)"
					},
					{
						parentName: '专科护理',
						name: '造口护理',
						parentCode: '08221528001',
						code: '08221528001_3',
						campusCode: "02",
						campusName: "*郫都区中医医院(新院区)"
					},
					{
						parentName: '母婴护理',
						name: '伤口护理',
						parentCode: '08221528002',
						code: '08221528002_1',
						campusCode: "02",
						campusName: "*郫都区中医医院(新院区)"
					},
					{
						parentName: '康复中医',
						name: '康复引导',
						parentCode: '08221528003',
						code: '08221528003_1',
						campusCode: "02",
						campusName: "*郫都区中医医院(新院区)"
					},
					{
						parentName: '就诊陪护',
						name: '就诊引导',
						parentCode: '08221528004',
						code: '08221528004_1',
						campusCode: "02",
						campusName: "*郫都区中医医院(新院区)"
					},
				]
				this.updatebranchCode(0)
			},
			updatebranchCode(e) {
				this.departList = []
				let map = new Map();
				for (let obj of this.departListAll) {
					if (this.name) {
						if (obj.name.includes(this.name)) {
							map.set(obj.parentCode, obj)
						}
					} else {
						map.set(obj.parentCode, obj)
					}

				}
				this.listParent = [...map].map(item => item[1])
				this.checkItem(this.listParent[0], 0)
			},
			checkItem(e, index) {
				let child = []
				this.departListAll.forEach(item => {
					if (item.parentCode == e.parentCode) {
						if (this.name) {
							if (item.name.includes(this.name)) {
								child.push(item)
							}

						} else {
							child.push(item)
						}
					}
				})
				this.showItems = child;
				this.active = index
			},
			onSearch(val) {
				this.name = val
				// 只需要检索当前院区的科室即可，不需要远程
				this.updatebranchCode(0);
			},
			toPage(value, type) {
				uni.setStorageSync("deptItem", value)
				uni.navigateTo({
					url: `/pages/Home/ServeComposite/NursingList?${type}=${value.code}`
				})
			},
			showChangeBranch() {
				this.selectShow = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail-list {
		display: flex;
		flex: 1;
		// border-radius: 8px;
		overflow: hidden;
		min-height: calc(100vh - 200upx);

		.left {
			width: 274upx;
			height: calc(100vh - 200upx);
			background-color: #F6F6F6;
			overflow-y: auto;

			.item {
				line-height: 44upx;
				// border-bottom: 1px solid rgba(0,0,0,0.12);
				padding: 24upx 0 24upx 20upx;
				background-color: #F6F6F6;
				position: relative;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28upx;
				color: rgba(0, 0, 0, 0.4);
				line-height: 44upx;

				&.active {
					color: $theme-color;
					background-color: #FFF;

					&:before {
						content: '';
						display: block;
						position: absolute;
						width: 6upx;
						height: 64upx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						background: $theme-color;
						border-radius: 4upx 0 0 4upx;
					}
				}
			}
		}

		.right {
			height: calc(100vh - 300upx);
			flex: 1;
			// padding: 0 32upx 96upx;
			background-color: #FFF;
			overflow: auto;

			.item {
				display: flex;
				justify-content: flex-start;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28upx;
				color: rgba(0, 0, 0, 0.7);
				line-height: 44upx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.12);
				padding: 24upx 20upx;

				/deep/.uni-radio-input {
					width: 32upx;
					height: 32upx;
				}

				.money {
					display: flex;
					color: #FF7F7F;
					font-size: 24upx;
					line-height: 40upx;

					.light-min-btn {
						// width: 260upx;
						height: 40upx;
						border-radius: 40upx;
						text-align: center;
						font-size: 24upx;
						background: transparent;
						border: 1px solid $theme-color;
						color: $theme-color;
						padding: 0 16upx;
						margin-left: 32upx;
					}
				}

			}
		}
	}

	.branch {
		justify-content: space-between;
		height: 108upx;
		line-height: 108upx;
		padding: 0 24upx;
		background-color: #FFF;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		color: rgba(0, 0, 0, 0.5);
		// .u-icon-wrap {
		//   float: right;
		// }
	}

	.depart-list-main {
		height: calc(100vh - 220rpx);
		background-color: $uni-bg-color;
		overflow: scroll;
	}

	.depart-list-title {
		font-size: 30rpx;
		color: #000000;
		font-weight: bold;
		height: 70rpx;
		line-height: 70rpx;
	}

	.u-cell-item-box {
		background-color: #FFFFFF;
		flex-direction: row;
	}
</style>